import React from 'react'
import {Card, CardBody, CardFooter, Col, Progress, Row} from "reactstrap";
import {ArrowRightCircle, Calendar} from "react-feather";
import {NavLink} from "react-router-dom";
import {parseUnixTime} from "../../../helpers/utils";

const Item = props => {
  const {name, id, releases_date, project, type, budget} = props.data
  const optionsDate = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  }
  const colors = ['success', 'warning', 'danger'];

  const time = parseInt(new Date().getTime() / 1000);

  const days = releases_date === null ? null : time > releases_date ? 0 : Math.ceil((releases_date - time) / 86400);

  const progress = (days === null || days >= 14) ? 0 : 100 - days * 7.14

  const date = releases_date ? `${parseUnixTime(releases_date).toLocaleString("ru", optionsDate)}` : ''


  return (
    <Col xs="12" md="6" className="mb-2 release-item">
      <Card className="mb-0 h-100">
        <div className="p-2 project-card-title">
          <Row>
            <Col xs={8} xl={4} className="release-progress">
              <Progress className="progress-lg" value={progress}
                        color={colors[(days === null || days >= 7) ? 2 : days >= 2 ? 1 : 0]}/>
            </Col>
            <Col xs={4} xl={2} className="release-days">
              {
                days !== null ? <span>{days} дн.</span> : ''
              }
            </Col>
            <Col xl={6} className="release-date mt-1 mt-lg-0">
              <div className={`align-items-center release-item__date`}>
                {date &&
                <div
                  className={`d-flex release-date-content align-items-center justify-content-xl-end h-100 mt-75 mt-sm-0`}
                >
                  <span className="release-item__date-big">{date}</span>
                  <Calendar className="fonticon-wrap" size={15}/>
                </div>
                }
              </div>
            </Col>
          </Row>
          <Row>
            <Col>
              <div className="release-item__title">
                <span className="text-primary">{name}</span>
              </div>
            </Col>
          </Row>
        </div>
        <CardBody className="px-2 py-0">
          <div className="d-flex justify-content-start project-card-content">
            <div className="release-item__option-title pr-1">
              <span>Тип:</span>
            </div>
            <div className="release-item__option-value">
              <span>{type && type.name ? type.name : ''}</span>
            </div>
          </div>
          <div className="d-flex justify-content-start project-card-content">
            <div className="release-item__option-title pr-1">
              <span>Проект:</span>
            </div>
            <div className="release-item__option-value">
              <span>{project && project.name ? project.name : ''}</span>
            </div>
          </div>
          <div className="d-flex justify-content-start project-card-content">
            <div className="release-item__option-title pr-1">
              <span>Бюджет:</span>
            </div>
            <div className="release-item__option-value">
              <span className="text-warning">{budget.toLocaleString('ru') + ' руб'}</span>
            </div>
          </div>
        </CardBody>
        <CardFooter className="border-0 pt-0">
          <div className="release-item__more-details">
            <NavLink to={`/releases/${id}/info`} className="release-item__link">
              <span>подробнее</span>
              <ArrowRightCircle className="fonticon-wrap" size={18}/>
            </NavLink>
          </div>
        </CardFooter>
      </Card>
    </Col>
  )
}

export default Item
